<template>
<div class="searchShopList">
  <div class="headmenu">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value" :options="option" />
    </van-dropdown-menu>
  </div>
  <div class="shopList">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="shop in shops"
        :key="`shop-${shop.id}`"
      >
        <template #title>
          <VueCateList
            :id="shop.id"
            :image="shop.image"
            :price="shop.price"
            :title="shop.title"
            :saleNum="shop.saleNum"
            :type="shop.type"
            :couponValue="shop.couponValue"
            :url="shop.url"
          />
        </template>
      </van-cell>
    </van-list>
  </div>
</div>
</template>

<script>
import VueCateList from '@/components/VueCateList'
export default {
  data () {
    return {
      word: '',
      value: 0,
      option: [
        { text: '默认排序', value: 0 },
        { text: '价格最低', value: 1 },
        { text: '销量最高', value: 2 }
      ],
      shops: [],
      loading: false,
      finished: false,
      start: 0
    }
  },
  created () {
    console.log(this.$route)
    this.word = this.$route.query.word
    this.onLoad()
  },
  components: {
    VueCateList
  },
  methods: {
    onLoad () {
      this.$http.getSearchShop(this.word)
        .then(resp => {
          console.log(resp)
          const { list, nextIndex, isEnd } = resp
          this.shops = this.shops.concat(list)
          this.start = nextIndex
          this.isEnd = isEnd
          // console.log(this.shops)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.searchShopList {
  display: flex;
  flex-direction: column;
}
.shopList {
  .van-list {
    display: flex;
    flex-wrap: wrap;
    .van-cell {
      width: 46%;
      margin: 2%;
      padding: 2%;
      background-color: white;
      box-sizing: border-box;
    }
    .van-cell__title {
      width: 100%;
    }
  }
}
</style>
